<template>
  <div class="echarts">
    <div
      :style="{ width: chartWidth, height: chartHeight }"
      class="no-data"
      v-if="this.data.length == 0"
    >
      <span>画图展无数据</span>
    </div>
    <div
      ref="echarts"
      :style="{ width: chartWidth, height: chartHeight }"
    ></div>
  </div>
</template>

<script>
import Echarts from './../echarts-js/echarts'
import echartsMixin from './../echarts-js/echarts-mixin'
export default {
  mixins: [echartsMixin],
  props: {
    //仪表盘名称
    gaugeName: {
      type: Function,
    },
    //雷达图的背景样式
    radarOption: {
      type: Object,
    },
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.echarts, this.theme)
      const myEcharts = new Echarts(this.type, this.otherOption, this.data, this.showData)
      this.initConfig(myEcharts)
      this.myChart.setOption(myEcharts.option)
    },
    initConfig(myEcharts) {

      //可选配置项
      myEcharts.setTitleName(myEcharts.option, this.titleName)
      myEcharts.setExportImgBcolor(myEcharts.option, this.exportImgBcolor)
      myEcharts.setXAxisName(myEcharts.option, this.xAxisName)
      myEcharts.setYAxisName(myEcharts.option, this.yAxisName)
      myEcharts.isShowTitle(myEcharts.option, this.isShowTitle)
      myEcharts.isShowLegend(myEcharts.option, this.isShowLegend)
      myEcharts.isShowTooltip(myEcharts.option, this.isShowTooltip)
      myEcharts.isShowToolbox(myEcharts.option, this.isShowToolbox)
      myEcharts.isShowDataZoom(myEcharts.option, this.isShowDataZoom)
      myEcharts.isShowLabel(myEcharts.option, this.isShowLabel)

      myEcharts.setMarkPointData(myEcharts.option, this.markPointData)
      myEcharts.setMarkLineData(myEcharts.option, this.markLineData)

      myEcharts.setSeries(myEcharts.option, this.mySeries) //更新series配置的信息

      //有参选择配置
      if (this.gaugeName) myEcharts.setGaugeName(myEcharts.option, this.gaugeName)
      if (this.radarOption) myEcharts.setRadarOption(myEcharts.option, this.radarOption)

      console.log(this.$watch)
    }
  }
}
</script>

<style>
</style>